import { Flex, Modal, ModalFuncProps } from "antd";
import TextArea from "antd/es/input/TextArea";
import { Fragment } from "react";

export function show_raw_jsons(pairs: any[] = [], props: ModalFuncProps = {}) {
  const children = (
    <Flex vertical align='stretch'>
      {
        pairs.map((item, idx) => {
          const title = Array.isArray(item) ? item[0] : void 0;
          const second = Array.isArray(item) ? item[1] : item
          return (
            <Fragment key={idx}>
              {title}
              {
                typeof second === 'object' ?
                  <TextArea value={JSON.stringify(second, null, 2)} style={{ height: 150 }} /> :
                  <div style={{ whiteSpace: 'pre-wrap' }}>{second}</div>
              }
            </Fragment>
          )
        })
      }
    </Flex>
  )
  Modal.info({
    icon: null,
    title: '原始数据',
    width: 'calc(100% - 100px)',
    footer: null,
    maskClosable: true,
    closable: true,
    content: children,
    ...props,
  })
}